﻿@{
    Layout = "~/Views/Shared/_LayoutPartial.cshtml";
}
<link href="~/Content/webuploader/webuploader.css" rel="stylesheet" />
<script src="~/Content/webuploader/webuploader.min.js"></script>
<style type="text/css">
    .tb {
        width: 750px;
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }

        .tb label {
            font-weight: bold;
        }

        .tb tr {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        .tb td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }

        .tb a {
            color: blue;
        }

    .icon {
        position: absolute;
        width: 16px;
        height: 16px;
        margin-left: 10px;
        background-color: white;
        cursor: pointer;
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.428571429;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .btn-default {
        text-shadow: 0 1px 0 #fff;
        background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
        background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
        background-repeat: repeat-x;
        border-color: #dbdbdb;
        border-color: #ccc;
    }

        .btn-default:hover, .btn-default:focus {
            background-color: #e0e0e0;
            background-position: 0 -15px;
        }
</style>

<form id="ff">
    <table id="tblAdd">
        <tr>
            <td>
                <label for="WorkType">工种：</label>
            </td>
            <td>
                <input class="txt01" type="text" id="WorkType" name="WorkType" field="WorkType" style="width:200px" />
                 
            </td>
        </tr>
        <tr>
            <td>
                <label for="QuestionType">题目类型：</label>
            </td>
            <td>
                
                <select class="easyui-combobox" id="QuestionType" name="QuestionType"  field="QuestionType" style="width:200px; ">
                    <option value="1">文字题</option>
                    <option value="2">图片题</option>
                    <option value="3">视频题</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <label for="Content">问题描述：</label>
            </td>
            <td>
                <textarea id="Content" name="Content" field="Content" style="width:745px;height: 100px"></textarea>
            <td>
        </tr>
        <tr>
            <td>
                <label for="OtherInfo">其他信息：</label>
            </td>
            <td>
                <input class="txt01" type="text" id="OtherInfo" name="OtherInfo" field="OtherInfo" style="width:720px" />
                <span class="icon icon-image_add" name="OtherInfoSingle" onclick="javascript: openUploader('OtherInfo')"></span>
            </td>
        </tr>

        <tr>
            <td>
                <label>选项：</label>
            </td>
            <td>
                <table class="tb" id="optiontb">
                    <tr>
                        <td>选项标识</td>
                        <td>选项内容</td>
                        @*<td>是否正确答案</td>*@
                        <td>操作</td>
                    </tr>
                    <tr id="row1">
                        <td>
                            <input class="txt01" type="text" name="Otitle" value="A" />
                        </td>
                        <td>
                            <input class="txt01" type="text" name="Content" id="row1Content" style="width: 300px" />
                            <span class="icon icon-image_add" name="OtherInfoGroup" onclick="javascript: openUploader('row1Content')"></span>
                        </td>
                        @*<td>
                            <input type="radio" name="IsTrue" checked="checked" />
                        </td>*@
                        <td>
                            <a href="javascript:deleterow(1)">删除</a>
                            <a href="javascript:insertrow()">添加新行</a>
                        </td>
                    </tr>
                    <tr id="row2">
                        <td>
                            <input class="txt01" type="text" name="Otitle" value="B" />
                        </td>
                        <td>
                            <input class="txt01" type="text" name="Content" id="row2Content" style="width: 300px" />
                            <span class="icon icon-image_add" name="OtherInfoGroup" onclick="javascript: openUploader('row2Content')"></span>
                        </td>
                        @*<td>
                            <input type="radio" name="IsTrue" />
                        </td>*@
                        <td>
                            <a href="javascript:deleterow(2)">删除</a>
                            <a href="javascript:insertrow()">添加新行</a>
                        </td>
                    </tr>
                    <tr id="row3">
                        <td>
                            <input class="txt01" type="text" name="Otitle" value="C" />
                        </td>
                        <td>
                            <input class="txt01" type="text" name="Content" id="row3Content" style="width: 300px" />
                            <span class="icon icon-image_add" name="OtherInfoGroup" onclick="javascript: openUploader('row3Content')"></span>
                        </td>
                        @*<td>
                            <input type="radio" name="IsTrue" />
                        </td>*@
                        <td>
                            <a href="javascript:deleterow(3)">删除</a>
                            <a href="javascript:insertrow()">添加新行</a>
                        </td>
                    </tr>
                    <tr id="row4">
                        <td>
                            <input class="txt01" type="text" name="Otitle" value="D" />
                        </td>
                        <td>
                            <input class="txt01" type="text" name="Content" id="row4Content" style="width: 300px" />
                            <span class="icon icon-image_add" name="OtherInfoGroup" onclick="javascript: openUploader('row4Content')"></span>
                        </td>
                        @*<td>
                            <input type="radio" name="IsTrue" />
                        </td>*@
                        <td>
                            <a href="javascript:deleterow(4)">删除</a>
                            <a href="javascript:insertrow()">添加新行</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <label for="Answer">正确答案：</label>
            </td>
            <td>
                <input class="txt01" type="text" id="Answer" name="Answer" field="Answer" value="A" />
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center; padding-top: 10px">
                <a href="javascript:void(0)" class="easyui-linkbutton" id="btnEp" iconcls="icon-reload" onclick="Reload()">重置</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" id="btnLogin" iconcls="icon-ok" onclick="SaveQuestion()">确定</a>
            </td>
        </tr>
    </table>
    <div id="uploaderdialog" class="easyui-dialog" style="width:400px;height:200px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="ff" method="post" novalidate="novalidate">
            <div class="btns">
                <div id="btnChooseFile" style="float:left;width: 80px;height:30px">选择文件</div>
                <button id="btnUploader" class="btn btn-default" style="float:left;margin-left: 10px;">开始上传</button>
            </div>
            <div id="thelist" class="uploader-list" style="clear:both"></div>
        </form>
    </div>
</form>
<script type="text/javascript">
    var applicationPath = "http://" + window.location.host;

    function deleterow(rowNum) {
        if (rowNum && rowNum != "")
            $("#row" + rowNum).remove();
    }

    var addCount = 0;

    function insertrow() {
        var row = $("tr", $("#optiontb")).length + 1;
        addCount += 1;
        var rowflg = addCount + "_" + row;
        var tbhtml = '<tr id="row' + rowflg + '">' +
            '<td><input class="txt01" type="text" name="Otitle" value="" /></td>' +
            '<td><input class="txt01" type="text" name="Content" id="row' + rowflg + 'Content" style="width: 300px" />' +
            '<span class="icon icon-image_add" name="OtherInfoGroup" onclick="javascript: openUploader(\'row' + rowflg + 'Content\')"></span></td>' +
            
            '<td><a href=javascript:deleterow(\'' + rowflg + '\')>删除</a> <a href="javascript:insertrow()">添加新行</a></td>' +
            '</tr>';
        //'<td><input type="radio" name="IsTrue" /></td>' +
        $("#optiontb").append(tbhtml);
    }

    $(function () {
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../../Content/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: 'Process',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#btnChooseFile',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            fileNumLimit: 1,
            accept: [
                {
                    title: '图片文件',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                {
                    title: '视频文件',
                    extensions: 'mov,wmv,mp4,avi,3gp',
                    mimeTypes: 'video/*'
                }
            ]
        });
        //选择文件
        uploader.on('fileQueued', function (file) {
            $("#thelist").append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        });
        //上传进度
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });
        //上传成功
        uploader.on('uploadSuccess', function (file, response) {
            $('#' + file.id).find('p.state').text('已上传');
            uploader.removeFile(file);
            if (domname && $("#" + domname).length > 0)
                $("#" + domname).val(applicationPath + response.filePath);
        });
        //上传出错
        uploader.on('uploadError', function (file, response) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        //上传完成
        uploader.on('uploadComplete', function (file, response) {
            $('#' + file.id).find('.progress').fadeOut();
            uploader.reset();
            $("#thelist").html("");
            $('#uploaderdialog').dialog('close');
        });

        //点击开始上传
        $("#btnUploader").on('click', function () {
            uploader.upload();
        });

        $("span[name='OtherInfoSingle']").css("visibility","hidden");
        //选择项改变
        var com = $("#QuestionType").combobox({
            onSelect: function (item) {
                if (item.value != "1") {
                    $("span[name='OtherInfoSingle']").css("visibility","visible");
                    $("span[name='OtherInfoGroup']").css("visibility","hidden");
                }
                else {
                   $("span[name='OtherInfoSingle']").css("visibility", "hidden");
                    $("span[name='OtherInfoGroup']").css("visibility", "visible");
                }
            }
        });

        //获取参数
        qId = getQueryString("QID") || 0;
        if (qId != 0) {
            $.get("GetQuestion", { QID: qId }, function (result) {
                if (result && result.QuestionInfo && result.OptionsInfoes) {
                    var question = result.QuestionInfo;
                    $("#Content").val(question.Content);
                    $("#OtherInfo").val(question.OtherInfo);
                    $("#Answer").val(question.Answer);
                    $("#QuestionType").combobox('setValue', question.QuestionType);
                    $("#WorkType").val(question.WorkType);

                    if (result.OptionsInfoes.length > 0) {
                        $("#optiontb").children().remove();
                        var row = 0;
                        $.each(result.OptionsInfoes, function (key, value) {
                            var rowflg = addCount + "_" + row;
                            var obj = value;
                            var isTrue = obj.IsTrue == true ? "checked='checked'" : "";
                            var tbhtml = '<tr id="row' + rowflg + '">' +
                                '<td><input class="txt01" type="text" name="Otitle" value="' + obj.Otitle + '" /></td>' +
                                '<td><input class="txt01" type="text" name="Content" value="' + obj.Content + '" id="row' + rowflg + 'Content" style="width: 300px" />' +
                                '<span class="icon icon-image_add" name="OtherInfoGroup" onclick="javascript: openUploader(\'row' + rowflg + 'Content\')"></span></td>' +
                                
                                '<td><a href=javascript:deleterow(\'' + rowflg + '\')>删除</a> <a href="javascript:insertrow()">添加新行</a></td>' +
                                '</tr>';
                            $("#optiontb").append(tbhtml);
                            //'<td><input type="radio" name="IsTrue" ' + isTrue + ' /></td>' +
                        });
                    }

                    if (question.QuestionType != "1") {
                        $("span[name='OtherInfoSingle']").css("visibility", "visible");
                        $("span[name='OtherInfoGroup']").css("visibility", "hidden");
                    }
                    else {
                        $("span[name='OtherInfoSingle']").css("visibility", "hidden");
                        $("span[name='OtherInfoGroup']").css("visibility", "visible");
                    }
                }
            });

        }
    });

    var qId = 0;

    //保存题目
    function SaveQuestion() {
        var save = {};
        var question = {};
        var options = [];
        question.Id = qId;
        question.Content = $("#Content").val();
        question.OtherInfo = $("#OtherInfo").val();
        question.Answer = $("#Answer").val();
        question.QuestionType = $("#QuestionType").combobox('getValue');
        question.WorkType = $("#WorkType").val();

        $("tr[id]", $("#optiontb")).each(function (key, value) {
            var option = {};
            option.QuestionID = qId;
            if ($("input[name=Otitle]", $(this)).length > 0)
                option.Otitle = $($("input[name=Otitle]", $(this))[0]).val();
            if ($("input[name=Content]", $(this)).length > 0)
                option.Content = $($("input[name=Content]", $(this))[0]).val();
            if ($("input[name=IsTrue]", $(this)).length > 0)
                option.IsTrue = $($("input[name=IsTrue]", $(this))[0]).attr("checked") == "checked";
            options.push(option);
        });

        save.QuestionInfo = question;
        save.OptionsInfoes = options;

        var j = $.toJSON(save);
        $.ajax({
            url: "/Manage/SaveQuestion",
            data: j,
            contentType: "application/json",
            success: function (result) {
                if (!result.result)
                    $.messager.alert("提示", "保存失败", "error");
                else {
                    $.messager.alert("提示", "保存成功", "info");
                    //location.reload();
                }
            },
            dataType: "json",
            type: "post",
            processData: false
        });
    }

    //刷新重置
    function Reload() {
        location.reload();
    }

    var domname = "";

    function openUploader(dom) {
        $('#uploaderdialog').dialog('open').dialog('setTitle', '上传文件');
        domname = dom;
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    $("input[name=IsTrue]").bind("click", function () {
        var dom = $("input[name=Otitle]", $(this).parent().parent()).val();
        $("#Answer").val(dom);
    });

</script>